<template>
  <a-modal class="form1"
           v-model="dialogVisible"
           title="订货需求确认"
           width="1280px"
           height="609px"
           :dialog-style="{ top: '20vh' }"
           @ok="handleOk()"
           :footer="null"
           @cancel="cancelOK()">
    <div class="title">
      <div class="title1">
        <img src="../../../../assets/image/sellerHub/error.png"
             alt="">
        <div>
          <div>
            <p>您有新的订货需求,请注意查收！</p>
            <p>推送时间：<span>{{validTime}}</span></p>
          </div>
          <div>
            <span>剩余截止时间</span>
            <span>{{newHouer}}:{{newMinute}}</span>
          </div>
        </div>
        <div class="ftitle1-right"
             v-if="status === 0">
          <img src="../../../../assets/image/sellerHub/dqr.png"
               alt="">
          待确认
        </div>
        <div class="ftitle1-right"
             v-if="status === 1">
          <img src="../../../../assets/image/sellerHub/dqr.png"
               alt="">
          部分待确认
        </div>
      </div>
      <div class="title2">
        <a-input-search placeholder="搜索商品零件号/商品名称"
                        v-model="materialName"
                        style="width: 320px"
                        @search="onSearch"
                        @change="onSearch" />
      </div>
      <div class="table">
        <a-table :columns="columns"
                 :data-source="data"
                 :pagination="false"
                 :scroll="{y: 304 }"
                 class="list-height">
          <!-- <template v-for="col in ['predictDays']"
                    :slot="col"
                    slot-scope="text, record, index">
            <div :key="col">
              <a-input-number :value="text"
                              :min="0"
                              :max="10"
                              @change="onChange" />
            </div>
          </template> -->
          <!-- <template slot="predictDays"
                    slot-scope="text, record, index ">
            <div class="daysClass">
              <a-input :value="record.predictDays"
                       @change="onChange(text, record, index)"
                       @blur="onChange1(text, record, index)"></a-input>
              <span class="slot-right1"
                    @click="addDays(text, record, index)">
                <a-icon type="plus" />
              </span>
              <span class="slot-right2"
                    icon="cloud"
                    @click="reduceDays">
                <a-icon type="minus" />
              </span>
            </div>
          </template> -->
          <template v-for="col in ['predictDays']"
                    :slot="col"
                    slot-scope="text, record,">
            <div :key="col">
              <div :value="text"
                   @change="e => handleChange(e.target.value, record.key, col,0)">
                <div class="daysClass">
                  <span class="slot-right1"
                        @click="e => handleChange(e.target.value, record.key, col,2)">
                    <a-icon type="plus" />
                  </span>
                  <span class="slot-right2"
                        icon="cloud"
                        @click="e => handleChange(e.target.value, record.key, col,1)">
                    <a-icon type="minus" />
                  </span>
                  <a-input v-model="record.predictDays" />
                </div>

              </div>
            </div>
          </template>
          <template slot="status"
                    slot-scope="text, record, ">
            <div class="editable-row-number">
              <span v-if="record.status === 0">待确认</span>
              <span v-if="record.status === 1">部分待确认</span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <div class="title-footer">
      <a-button key="submit"
                @click="cancelOK"
                style="margin-right:16px">
        取消
      </a-button>
      <a-button key="submit"
                type="danger"
                @click="handleOk">
        确认发送
      </a-button>
    </div>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: '序号',
    align: 'center',
    width: 60,
    customRender: (text, record, index) => `${index + 1}` // 显示每一行的序号
  },
  {
    title: '商品编号',
    dataIndex: 'materialCode',
    key: 'materialCode',
  },
  {
    title: '商品名称',
    dataIndex: 'materialName',
    key: 'materialName',
  },
  {
    title: '规格',
    dataIndex: 'specifications',
    key: 'specifications',
    ellipsis: true,
  },
  {
    title: '计量单位',
    dataIndex: 'unit',
    key: 'unit',
    ellipsis: true,
  },
  {
    title: '含税单价(元)',
    dataIndex: 'materialPrice',
    key: 'materialPrice',
    ellipsis: true,
  },
  {
    title: '订货数量',
    dataIndex: 'requireNum',
    key: '1',
    ellipsis: true,
  },
  {
    title: '已确认待下单',
    dataIndex: 'confirmedToOrderNum',
    key: 'confirmedToOrderNum',
    ellipsis: true,
  },
  {
    title: '需求数量',
    dataIndex: 'requireNum',
    key: 'requireNum',
    ellipsis: true,
  },
  {
    title: '订货周期(天)',
    dataIndex: 'predictDays',
    key: 'predictDays',
    ellipsis: true,
    width: 120,
    scopedSlots: { customRender: 'predictDays' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    ellipsis: true,
    scopedSlots: { customRender: 'status' },
  },
];
//1待确认 2已确认
const data = [];
export default {

  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      Timestatus: 1,
      data,
      columns,
      id: '',
      presentNum: '',
      validTime: '',
      newHouer: '',
      newMinute: '',
      status: '',
      materialName: null,
    }
  },
  created () {
    // this.getList('660b32d3091c80ab4e3afa56994d9e7f')
  },
  methods: {
    getList (item) {
      if (item) {
        this.id = item.id
        this.newHouer = item.newHouer
        this.newMinute = item.newMinute
        this.validTime = item.validTime
        this.status = item.status
      }
      this.$store.dispatch('request', this.$api.sellerCenter.orderConfirmationDetail(this.id, this.materialName)).then(res => {
        console.log(res);
        this.data = res.result
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].status = item.status
          this.data[i].key = i + 1,
            this.data[i].predictDays = undefined
        }
      })
    },
    onSearch () {
      console.log(this.id);
      this.getList()
    },
    handleOk () {
      let result = []
      for (var i = 0; i < this.data.length; i++) {
        if ('predictDays' in this.data[i] && this.data[i].predictDays !== undefined) {
          result.push({
            'id': this.data[i].id,
            'predictDays': this.data[i].predictDays
          })
        }
      }
      console.log(result)
      if (result.length === 0) {
        //走弹窗
        this.$message.error("请先输入订货周期！");
      } else {
        this.$store.dispatch('request', this.$api.sellerCenter.saveConfirmNum({ id: this.id, list: result })).then(res => {
          console.log(res);
          this.$emit('confirmImmediatelyDetermine', JSON.parse(JSON.stringify(this.form)));
        })
      }
    },
    cancelOK () {
      this.$emit('cancel')
    },
    handleChange (value, key, column, Status) {
      console.log(value, key, column, Status);
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        //0 为输入数字  1为减一 2为加一
        if (Status === 0) {
          if (target[column] > 0) {
            target[column] = value;
          } else {
            this.$message.error("订货天数不能为0");
            target[column] = ''
          }

        }
        if (Status === 1) {
          if (target[column] > 1) {
            target[column] = target[column] - 1
          }
        }
        if (Status === 2) {
          // if (target[column] < target.unPackedQuantity) {

          // }
          target[column] = Number(target[column]) + 1
        }
        this.data = newData;
      }
    },
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.red {
  border: 1px solid @activeRed !important;
}
.title {
  padding-bottom: 16px;
  padding: 0 24px 0;
  .title1 {
    width: 1232px;
    height: 58px;
    background: rgba(255, 144, 3, 0.06);
    border: 1px solid rgba(255, 144, 3, 0.2);
    font-size: 12px;
    color: @newColorGreyFontM;
    padding: 10px 24px;
    position: relative;
    img {
      width: 16px;
      height: 16px;
      float: left;
    }
    > div {
      padding-left: 8px;
      overflow: hidden;
      > div {
        float: left;
        p {
          margin-bottom: 4px;
          height: 17px;
          line-height: 17px;
        }
        p:nth-child(2) {
          color: @newColorGreyFont;
          span {
            color: @newColorGreyFontM;
          }
        }
      }
      > div:nth-child(2) {
        margin-left: 16px;
        width: 155px;
        height: 30px;
        line-height: 26px;
        opacity: 1;
        background: #fce9e1;
        border: 1px solid @activeRed;
        border-radius: 2px;
        text-align: center;
        position: relative;
        margin-top: 4px;
        color: @activeRed;
        > span:nth-child(1)::after {
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          right: 59px;
          top: 10px;
          background: @activeRed;
        }
        > span:nth-child(1) {
          padding-right: 17px;
        }
        > span:nth-child(2) {
          font-size: 16px;
        }
      }
    }
    .ftitle1-right {
      position: absolute;
      right: 52px;
      top: 4px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #ff9003;
      img {
        width: 50px;
        height: 50px;
        margin-right: 7px;
      }
    }
  }
  .title2 {
    width: 1232px;
    height: 64px;
    border-radius: 2px;
    padding: 16px;
    text-align: right;
    > div {
      font-size: 12px;
      float: left;
      height: 32px;
      padding: 0 10px;
      line-height: 30px;
      margin-right: 8px;
      border: 1px solid @newBorderS;
      cursor: pointer;
      color: @newColorGreyFontM;
    }
    > div:nth-child(1) {
      border: none;
    }
    .span {
      float: right;
      margin-top: 7px;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
.title-footer {
  border-top: 1px solid @newBorder;
  width: 1280px;
  height: 64px;
  text-align: right;
  padding: 16px 24px 0 0;
  span {
    font-size: 12px;
    color: @newColorGreyFont;
    margin-right: 12px;
    i {
      font-size: 12px;
      color: @newColorGreyFontM;
      font-style: normal;
      color: @activeRed;
    }
  }
}
.daysClass {
  position: relative;

  .slot-right1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 21px;
    height: 17px;
    border-left: 1px solid @newBorderS;
    border-bottom: 1px solid @newBorderS;
    cursor: pointer;
    text-align: center;
    font-size: 8px;
    line-height: 14px;
    color: #525050;
    z-index: 99;
  }
  .slot-right2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 21px;
    color: #525050;
    height: 16px;
    border-left: 1px solid @newBorderS;
    cursor: pointer;
    text-align: center;
    line-height: 14px;
    font-size: 8px;
    z-index: 99;
  }
}

/deep/ .ant-table-thead .ant-table-row-cell-ellipsis:nth-child(10) {
  background: #fff3e2;
  color: #ff9003;
}
/deep/ .ant-modal-body {
  padding: 24px 0 0;
}
/deep/ .ant-input {
  border: 1px solid @newBorder;
  font-size: 12px;
}
/deep/ .ant-table-thead > tr > th {
  padding: 11px 16px;
  font-size: 12px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 11px 16px;
  font-size: 12px;
}
/deep/ .ant-table-thead > tr > th {
  border-bottom: 1px solid @newBorder;
}
/deep/ .ant-btn {
  width: 72px;
  height: 32px;
  text-align: center;
  font-size: 12px;
  padding: 0 4px;
}
/deep/ .ant-modal-content {
  border-radius: 8px;
}
/deep/ .editable-row-number {
  width: 52px;
  height: 26px;
  line-height: 26px;
  background: #fff7eb;
  color: #ff9003;
  font-size: 12px;
  border-radius: 2px;
  text-align: center;
}
/deep/ .ant-input-number {
  width: 86px;
}
/deep/ .ant-input-number-handler-wrap {
  opacity: 1 !important;
}
</style>